<script>
import {Courselist, live} from "@/API/http";

export default {
  name: "liveCourse",

  data() {
    return {
      num: 1,
      tag: 0,
      liveList: [],
      // 直播课程参数
      live: {},
      Courselist: []
    }
  },

  methods: {
    up() {
      if (this.num >= 0) {
        this.num--
      }
    },
    next() {
      if (this.num <= 2) {
        this.num++
      }
    },
    // 换一换按钮
    upCourselist() {

      this.tag = (this.tag + 1) % 3

    }
  },

  created() {
    live(this.live).then((res) => {
      this.liveList = res.rows;
    })
    Courselist().then((res) => {
      console.log(res)
      this.Courselist = res.data;
    })
  }
}
</script>

<template>
  <div>
    <!--  直播课程-->
    <div class="liveCourse">
      <!--    直播课程左面-->
      <div class="liveCourseLeft">
        <!--      直播课程左面上面-->
        <div class="liveCourseLeftTop">
          <div class="liveCourselefttext">
            <img src="@/assets/liveTv.png" alt="" width="46">
            <h2 class="liveH2">直播课程</h2>
            <p>互联网大佬在线直播</p>
          </div>
          <div class="liveCourserightarrow">
            <div @click="up">
              <a-icon type="left"/>
            </div>
            <div @click="next">
              <a-icon type="right"/>
            </div>
          </div>
        </div>
        <!--      直播课下面-->
        <div class="liveCourseLeftBottom">
          <div class="liveCourseBox" v-for="item in liveList.slice((num-1)*4,(num-1)*4+4)" :key="item.courseId">
            <router-link :to="{path:'/details',query:{id:item.courseId}}">

              <div class="liveCourseImgBox">
                <img :src="item.course.coverFileUrl" alt="图片失效">
              </div>
              <p class="liveCoursetext">{{ item.course.courseTitle }}</p>
              <p>√直播结束</p>
            </router-link>
          </div>
        </div>
      </div>
      <!--    直播右面-->
      <div class="liveCourseRight">
        <div class="liveCourseRighttTop">
          <div class="liveCourselefttext">
            <img src="@/assets/live-hot.png" alt="" width="46">
            <h2 class="liveH2">课程榜单</h2>
            <p>以购买、学习相关数据为依据～每日更新</p>
          </div>
        </div>
        <!--        右面下面-->
        <div class="liveCourseRightBottom">
          <div class="liveCourseRightBox">
            <!--          畅销榜图-->
            <div class="liveCourseRightImg">
              <img src="@/assets/Hot.png" width="150">
            </div>
            <!--          这是下面放图片文字的盒子-->
            <div class="liveCourseBottomBox" v-for="(item,index) in Courselist.slice((tag)*3,(tag)*3+3)" :key="index">
              <div class="liveRightimg">
                <div :class="`tag${index}`">No.{{ tag * 3 + index + 1 }}</div>
                <img :src="item.bannerFileUrl" alt="">
              </div>
              <div class="liveRighttext">
                <p>{{ item.courseTitle }}</p>
                <p class="yen">&yen;{{ item.coursePrice }}</p>
                <p>{{ item.participationsCount }}人报名</p>
              </div>
            </div>
            <!-- 换一换按钮-->
            <div class="livechange" @click="upCourselist">
              换一换
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
//页面所有P
p {
  margin: 0;
}

.banneritem {
  background: white;
}

.liveCourse {
  display: flex;
}

//左面
.liveCourseLeft {
  width: 60%;
  padding: 15px;
  border-radius: 15px;
  background: #fff;
}

//左面上面
.liveCourseLeftTop {
  display: flex;
  justify-content: center;
  align-items: center;
}

//直播课程左面的小电视和文字
.liveCourselefttext {
  display: flex;
  align-items: flex-end;
  margin-right: auto;

}

//.直播课程四个字
.liveH2 {
  margin: 0px 10px;
}

//右面的箭头
.liveCourserightarrow {
  display: flex;
  align-items: center;
  justify-content: center;

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 5px;
    color: white;
    border-radius: 50%;
    background: gray;
  }
}

//直播课下面
.liveCourseLeftBottom {
  flex-wrap: wrap;
  display: flex;
  margin-top: 15px;
}

//放每一个直播图片文字的盒子
.liveCourseBox {
  p {
    color: #0f141a;
  }

  overflow: hidden;
  border-radius: 15px;
  width: 47%;
  cursor: pointer;
  margin: 10px;
  box-shadow: 0px 0px 5px gainsboro;
  padding: 10px;
}

.liveCourseImgBox {
  //width: 260px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;

  img {
    height: 180px;
    width: 100%;
    transition: transform 2s;

  }

  img:hover {
    transform: scale(1.2);
  }
}

.liveCoursetext {
  font-weight: bold;
  margin: 5px 0;
}

//右面
//左面
.liveCourseRight {
  cursor: pointer;
  margin-left: 15px;
  width: 40%;
  padding: 15px;
  border-radius: 15px;
  background: #fff;
}

//右面上面
.liveCourseRighttTop {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

//右面下面
.liveCourseRightBottom {
  padding: 10px;
}

.liveCourseRightBox {
  height: 525px;
  position: relative;
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0px 0px 5px gainsboro;
}

//畅销榜
.liveCourseRightImg {
  transform: translate(-50%, -50%);
  top: 0;
  left: 50%;
  position: absolute;
}

//右面的图
.liveRightimg {
  margin-right: 15px;
  border-radius: 15px;
  overflow: hidden;
  width: 47%;
  height: 112px;
  position: relative;

  img {
    height: 100%;
    width: 100%;
    transition: transform 2s;

  }

  img:hover {
    transform: scale(1.2);
  }
}

.liveCourseBottomBox {
  margin: 15px;
  display: flex;
}

//图里的No.1
.tag0,.tag1,.tag2 {
  z-index: 1;
  border-radius: 15px 0 15px 0;
  padding: 0 10px;
  color: white;

  position: absolute;
}
.tag0 {
  background: #fc8b33;
}
.tag1 {
  background: #c1b6b1;
}
.tag2 {
  background: #eb4d86;
}

.liveCourseBottomBox:nth-child(2) {
  margin-top: 50px;
}

//换一换
.livechange {
  border-radius: 20px;
  margin: auto;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: white;
  margin-top: 40px ;
  background: linear-gradient(to right, #fd912f, #f15549);
}

.yen {
  color: red;
  margin-top: 20%;
  font-size: 20px;
  font-weight: bold;
}

.liveRighttext {
  width: 45%;

  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>